import React, { Component } from 'react'
import { Route, Switch, Redirect } from 'react-router-dom'
import Tabbar from '../../components/Tabbar';
import './index.scss'

import Films from './Films'
import Discover from './Discover'
import Order from './Order'
import Center from './Center'
import Site from './Site'

export default class Home extends Component {
  constructor(props) {
    super(props);
    this.state = {
      myTabs: [
        { key: 'films', href: "/films", icon: "icon-shouye", name: '首页' },
        { key: 'discover', href: "/discover", icon: "icon-faxian", name: '发现' },
        { key: 'order', href: "/order", icon: "icon-dingdan", name: '订单' },
        { key: 'center', href: "/center", icon: "icon-icon-test", name: '我的' }
      ]
    }
  }
  render() {
    return (
      <div className="main">
        <Switch>
          <Route  path="/films" component={Films}></Route>
          <Route  path="/discover" component={Discover}></Route>
          <Route  path="/order" component={Order}></Route>
          <Route  path="/center" component={Center}></Route>
          <Route  path="/site" component={Site}></Route>
          <Redirect to="/films"></Redirect>
        </Switch>
        <Tabbar tabs={this.state.myTabs}></Tabbar>
      </div>
    )
  }
}
